<template>
  <div class="main-content partner-list-wrapper">
    <div class="filter-box">
      <p class="title">伙伴查询</p>

      <el-form :inline="true" :model="form">
        <div class="item">
          <el-form-item label="伙伴名称">
            <el-input
              v-model="form.nickname"
              placeholder="请输入"
              clearable
              @clear="searchFn"
              
            />
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="content-box">
      <div class="top-box">
        <el-button type="primary" @click="addFn"> 增加伙伴 </el-button>
      </div>

      <ct-table :options="tableOptions">
        <template v-slot:index="scope">
          <span>{{ scope.row.index }}</span>
        </template>
        <template v-slot:realInfo="scope">
          <span>{{ scope.row.realInfo }}</span>
        </template>
        <template v-slot:operate="scope">
          <el-text type="primary" @click="toDetail(scope.row)"> 详情 </el-text>
        </template>
      </ct-table>

      <ct-pagination :options="pageOptions" :pageEvent="getListData">
      </ct-pagination>
    </div>

    <AddOrEditPartner
      v-model:show="operateData.show"
      :data="operateData.data"
      v-if="operateData.show"
      @updateList="getListData"
    />
  </div>
</template>

<script setup>
import { getPartnerList } from "@/api";

import { useRouter } from "vue-router";
const router = useRouter();

const { proxy } = getCurrentInstance();

import CtTable from "@/components/CtTable.vue";
import CtPagination from "@/components/Pagination.vue";
import AddOrEditPartner from "./dialog/AddOrEditPartner.vue";

import { usePageOptions } from "@/hooks/usePageOptions";
const { pageOptions } = usePageOptions();

let form = ref({
  nickname: "",
});

let operateData = reactive({
  show: false,
  data: {},
});

function addFn() {
  operateData.show = true;
  operateData.data = {
    type: 1,
  };
}

function toDetail(row) {
  console.log(row);
  router.push({
    name: "partnerDetail",
    query: {
      id: row.id,
    },
  });
}

let tableOptions = reactive({
  data: [],
  loading: false,
  columns: [
    {
      label: "序号",
      prop: "index",
      width: 80,
      isCustom: true,
    },
    {
      label: "伙伴名称",
      prop: "nickname",
    },
    {
      label: "伙伴类型",
      prop: "agentTypeName",
    },
    {
      label: "联系方式",
      prop: "mobile",
    },
    {
      label: "上月消费",
      prop: "lastMonth",
    },
    {
      label: "本月消费",
      prop: "thisMonth",
    },
    {
      label: "直客数量",
      prop: "memNum",
    },
    {
      label: "是否实名",
      prop: "realInfo",
    },
    {
      label: "伙伴等级",
      prop: "levelName",
    },
    {
      label: "伙伴折扣",
      prop: "discountRatio",
    },
    {
      label: "激励比例",
      prop: "incentiveRatio",
    },
    {
      label: "操作",
      prop: "operate",
      isCustom: true,
    },
  ],
});

function getListData() {
  tableOptions.loading = true;
  const { currentPage, pageSize } = pageOptions;
  const { nickname } = form.value;

  getPartnerList({
    nickname,
    page: currentPage ,
    pageSize,
  })
    .then((res) => {
      const { rows, total } = res.data;
      if (rows.length) {
        for (let i = 0; i < rows.length; i++) {
          rows[i].index = proxy.$handleIndex(i, pageOptions);
          rows[i].lastMonth =parseFloat(rows[i].lastMonth.toFixed(2)) 
          rows[i].thisMonth =parseFloat(rows[i].thisMonth.toFixed(2))  
        }
      }
      tableOptions.data = rows;
      tableOptions.loading = false;
      pageOptions.total = total;
    })
    .catch(() => {
      tableOptions.loading = false;
    });
}

const searchFn = proxy.$debounce(() => {
  tableOptions.data = [];
  pageOptions.currentPage = 1;
  pageOptions.total = 0;

  getListData();
});

onMounted(() => {
  getListData();
});
</script>

<style lang="scss" scoped>
.partner-list-wrapper {
}
</style>
